<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp" %>
<c:set var="isEditable" value="${'TRUE' eq ISEDIT}" />
<c:set var="isCreative" value="${'TRUE' eq ISNEW}" />
<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<%@ include file="/common/common-css.jsp" %>
		<script type="text/javascript">
			if(${isCreative}){
				cmdSave="/ace/people/save.action?ISNEW=TRUE";
			}else{
				cmdSave="/ace/people/save.action";
			}
			cmdReturn="/ace/people/show.action";
		</script>
	</head>
<body  class="no-skin">
			<div class="page-content">
					<div class="page-content-area">
							<div class="page-header">
								<h1>
									新增People
									<small>
										<i class="ace-icon fa fa-angle-double-right"></i>
										新增People资料
									</small>
								</h1>
							</div>
							
							<cx:ace-Msg />
							
							<div class="row">
								 <div class="col-sm-12">
							 		<div class="widget-box">
										<div class="widget-header widget-header-blue widget-header-flat">
										<h1 class="widget-title lighter"></h1>
									</div>
		
									<div class="widget-body" style="height:800px;overflow:auto">
										<div class="widget-main">
								 		<form class="form-horizontal" id="validation-form" method="post" action="">
										<!-- #section:elements.form -->
										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="form-id">编码ID</label>
											<div class="col-xs-12 col-sm-9">
												<div class="clearfix">
													<input type="text" name="id"  id="form-id" placeholder="" class="col-xs-12 col-sm-6" value="${paramsMap.id}" readonly="" >
												</div>
											</div>
										</div>
									
									
									    <div class="space-2"></div>
									
										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="form-name">姓名</label>
	
											<div class="col-xs-12 col-sm-9">
												<div class="clearfix">
													<input type="text" name="name" id="form-name" placeholder="" class="col-xs-12 col-sm-6" value="${paramsMap.name}">
												</div>
											</div>
										</div>
									
										<div class="hr hr-dotted"></div>
									
										<div class="form-group">
												<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="form-sex">性别</label>
												<div class="col-xs-12 col-sm-9">
													<!-- 
														<div class="clearfix input-group">
														<cx:select list="$SEX" id="sex" name="sex"  emptyOption="true" value="%{paramsMap.sex}"></cx:select>
													</div>
													 -->
													 <cx:ace-Radio list="$SEX" name="sex"  value="${paramsMap.sex}"/>
													 <!-- 
													<div class="radio">
														<label class="line-height-1">
															<input name="form-field-radio form-control" checked type="radio" name="sex" class="ace">
															<span class="lbl">&nbsp;男</span>
														</label>
														<label class="line-height-1">
															<input name="form-field-radio form-control" type="radio" name="sex" class="ace">
															<span class="lbl">&nbsp;女</span>
														</label>
														<label class="line-height-1">
															<input name="form-field-radio form-control" type="radio" name="sex" class="ace">
															<span class="lbl">&nbsp;未知</span>
														</label>
													</div>
													 -->
												</div>
										</div>
									
										<div class="space-2"></div>
									
										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="form-brith">出生年月</label>
	
											<div class="col-xs-12 col-sm-9">
													<div class="input-group col-xs-3 col-sm-3" >
														<input class="form-control date-picker" name="brith" id="form-brith" type="text" data-date-format="yyyy-mm-dd" value="${paramsMap.brith}">
														<span class="input-group-addon">
															<i class="fa fa-calendar bigger-110"></i>
														</span>
													</div>
											</div>
										</div>

										<div class="hr hr-dotted"></div>
									
										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="form-status">状态</label>
	
											<div class="col-xs-12 col-sm-9">
												<div class="clearfix input-group">
													<cx:select list="$STATE" id="status" name="status"  emptyOption="true" value="%{paramsMap.status}"></cx:select>
												</div>
											</div>
										</div>
									
										<div class="space-2"></div>
									
										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="form-createtime">创建时间</label>
	
											<div class="col-xs-12 col-sm-9">
														<div class="input-group col-xs-3 col-sm-3">
																<input class="form-control" id="form-createtime" name="createtime" value="${paramsMap.createtime}" type="text" data-date-format="yyyy-MM-dd hh:ii:ss" >
																<span class="input-group-addon">
																	<i class="fa fa-clock-o bigger-110"></i>
																</span>
														</div>
											</div>
										</div>
									
										<div class="space-2"></div>

										<div class="form-group">
											<label class="control-label col-xs-12 col-sm-3 no-padding-right" for="form-memo">描述</label>
											<div class="col-xs-12 col-sm-9">
												<div class="clearfix">
													<textarea id="form-memo" name="memo" placeholder="最多可输入100个字符" class="autosize-transition col-xs-12 col-sm-6 limited" maxlength=500 style="overflow: hidden; word-wrap: break-word; resize: horizontal; height: 80px;">${paramsMap.memo}</textarea>
												</div>
											</div>
										</div>

										<hr>
										
										<div class="clearfix form-actions">
											<div class="col-md-offset-3 col-md-9">
												<button id="btn-save" name="btn-save" class="btn  btn-pink btn-lg no-border" type="button">
													<i class="ace-icon fa fa-floppy-o bigger-160"></i>
													保存
												</button>
	
												&nbsp; &nbsp; &nbsp;
												<button class="btn  btn-inverse btn-lg no-border" type="buttion" onclick="doReturn();"> 
													<i class="ace-icon fa fa-undo bigger-160"></i>
													返回
												</button>
											 </div>
										</div>
								 	</form>
								 		 	</div><!-- /.widget-main -->
										</div><!-- /.widget-body -->
									</div><!-- /.widget-box -->
								 </div><!-- /.col -->
							</div><!-- /.row -->
					</div><!-- /.page-content-area -->
			</div><!-- /.page-content -->
			
			<%@ include file="/common/common-js.jsp" %>
			<script>
			
				$(function(){
						//日期插件
						$('.date-picker').datepicker({
							autoclose: true,
							todayHighlight: true
						}).next().on(ace.click_event, function(){
							$(this).prev().focus();
						});
						
						
						//日期时间插件
						$('#form-createtime').datetimepicker({
							  	language:  'zh-CN',
						        weekStart: 1,
						        todayBtn:  1,
								autoclose: 1,
								todayHighlight: 1,
								startView: 2,
								forceParse: 0,
       							showMeridian: 1,
       							format: 'yyyy-mm-dd hh:ii:ss'
						}).next().on(ace.click_event, function(){
							$(this).prev().focus();
						});
						
						//表单input改变校验
						$("input").on('change' , function(e, info){
							if(!$('#validation-form').valid()) return false;
						})
						
						//Textarea提示
						$('textarea[class*=autosize]').autosize({append: "\n"});
						$('textarea.limited').inputlimiter({
							remText: '还可以输入%n个字符 ',
							limitText: '最多允许输入: %n个字符'
						});
						
						//【提交】按钮Click事件		
						$("button[name='btn-save']").bind("click", function () { 
								//表单校验
								//if(!$('#validation-form').valid()) return false;
								
								//$('#validation-form').submit();
								doSave();
		    			});
				});
		
				
			
			
				$('#validation-form').validate({
					errorElement: 'div',
					errorClass: 'help-block',
					focusInvalid: false,
					rules: {
						id: {
							required: true
						},
						name: {
							required: true
						},
						brith: {
							required: true
						},
						sex: {
							required: true
						},
						memo: {
							required: true
						},
						status: {
							required: true
						},
						createtime: {
							required: true
						}
					},
			
					messages: {
						id: {
							required: "请输入ID."
						},
						name: {
							required: "请输入姓名."
						},
						brith: "请设置出生日期",
						sex: "请选择性别",
						memo: "请输入备注",
						status: "请设置状态",
						createtime: "请设置创建时间"
					},
			
			
					highlight: function (e) {
						$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
					},
			
					success: function (e) {
						$(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
						$(e).remove();
					},
			
					errorPlacement: function (error, element) {
						if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
							var controls = element.closest('div[class*="col-"]');
							if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
							else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
						}
						else if(element.is('.select2')) {
							error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
						}
						else if(element.is('.chosen-select')) {
							error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
						}
						else error.insertAfter(element.parent());
					},
			
					submitHandler: function (form) {
					},
					invalidHandler: function (form) {
					}
				});
				
			</script>
</body>
</html>